/* eslint-disable @typescript-eslint/explicit-function-return-type */
/* eslint-disable @typescript-eslint/no-explicit-any */
import { defineComponent, Ref, ref } from 'vue';
import {
  getEditorEmits,
  getEditorProps,
  useNamespace,
} from '@ibiz-template/vue3-util';
import dayjs from 'dayjs';
import { CheckinHolidayCalendarController } from './checkin-holiday-calendar.controller';
import './checkin-holiday-calendar.scss';

export const CheckinHolidayCalendar = defineComponent({
  name: 'IBizCheckinHolidayCalendar',
  props: getEditorProps<CheckinHolidayCalendarController>(),
  emits: getEditorEmits(),
  setup(props) {
    const c = props.controller;
    const ns = useNamespace('checkin-holiday-calendar');

    const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
    const curMonth = ref();
    const items = ref([]);
    curMonth.value = new Date();
    // 所有周
    const weeks: Ref<Array<any>> = ref([]);
    const handleWeekGroups = (year: number, month: number) => {
      weeks.value = [];
      // 当前时间进度时间戳
      const start = new Date(year, month, 1);
      const end = new Date(year, month + 1, 0);
      let temptime = start.getTime();
      const endtime = end.getTime();
      while (temptime <= endtime) {
        const tempweeks = new Array(7).fill('');
        // 当前星期几
        const day = new Date(temptime).getDay();
        for (let i = day; i < 7; i++) {
          const curData = temptime + (i - day) * 86400000;
          if (curData <= endtime) {
            tempweeks[i] = dayjs(curData).format('YYYY-MM-DD');
          }
        }
        temptime += (7 - day) * 86400000;
        weeks.value.push(tempweeks);
      }
    };

    c.evt.on('onChange', (event: IData) => {
      items.value = event.data;
    });

    const init = () => {
      const curData = new Date();
      const year = curData.getFullYear();
      const month = curData.getMonth();
      handleWeekGroups(year, month);
      c.rq = dayjs(curMonth.value).format('YYYY-MM');
      c.refresh();
    };

    // 计算是否是节假日
    const calcHoliday = (_day: string, _index: number): IData | undefined => {
      const tempItem = items.value.find((item: IData) => {
        return item.date === _day;
      });
      return tempItem;
    };

    init();

    const renderWeeks = () => {
      return weeks.value.map((week: any[]) => {
        return (
          <div class={[ns.e('weekgroup')]}>
            {week.map((item: string, index: number) => {
              const holiday = calcHoliday(item, index);
              return (
                <div
                  class={[
                    ns.e('week'),
                    ns.is('work', !!item),
                    ns.is('holiday', !!holiday),
                  ]}
                >
                  <div class={ns.em('week', 'cell')}>
                    {item.split('-').pop()}
                  </div>
                  <div
                    class={[
                      ns.em('week', 'cell'),
                      ns.em('week', 'holiday-name'),
                    ]}
                  >
                    {holiday?.name === '双休日' ? '' : holiday?.name}
                  </div>
                </div>
              );
            })}
          </div>
        );
      });
    };

    const onChange = async (date: Date | null) => {
      if (!date) return;
      curMonth.value = date;
      c.rq = dayjs(curMonth.value).format('YYYY-MM');
      handleWeekGroups(date.getFullYear(), date.getMonth());
      await c.refresh();
    };
    return { ns, weekdays, curMonth, renderWeeks, onChange, calcHoliday };
  },
  render() {
    return (
      <div class={this.ns.b()}>
        <div class={this.ns.e('header')}>
          <el-date-picker
            type='month'
            v-model={this.curMonth}
            format='YYYY-MM'
            placeholder='请选择'
            onChange={this.onChange}
          ></el-date-picker>
          <div class={this.ns.e('legend')}>
            <div class={this.ns.em('legend', 'work-day')}>工作日</div>
            <div class={this.ns.em('legend', 'rest-day')}>休息日</div>
          </div>
        </div>
        <div class={this.ns.e('content')}>
          <div class={this.ns.e('week-header')}>
            {this.weekdays.map((item: string) => {
              return <div class={[this.ns.e('weekday')]}>{item}</div>;
            })}
          </div>
          {this.renderWeeks()}
        </div>
      </div>
    );
  },
});
